<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登录界面</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="./js/prop.js"></script>
</head>
<body>
<div class="box">
	<h1><font color="white">Login</font></h1>
	<table>

		<tr>
			<td><font color="white">用户名 : </font></td>
			<td><input type="text" placeholder="userName" id="username"><br></td>
		</tr>
		<tr>
			<td><font color="white">密码 : </font></td>
			<td><input type="password" placeholder="passWord" id="password"></td>
		</tr>

	</table>
	<br/>
	<table>
		<tr>
			<td><button id="ok" class="button">登录</button></td>
			<td>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;</td>
			<td><button class="button"><a href="./sign.html">注册</a></button></td>
		</tr>
	</table>
</div>
</body>
</html>

<script>
	$('#ok').click(() => {
		let url = yun + 'user/login';
		console.log('url');
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
		}
		$.get(url, data, (data) => {
			console.log(data);
			// 请求成功 写入登录标记 跳转到index重定向
			if (data.status === 200) {
				$.cookie('userId', data.data.userId, { expires: 7, path: yun });
				window.location.assign('./index.html');
			}
			else {
				alert(data.statusInfo);
			}
		});
	});

</script>

<style>
	body{
		margin: 0;
		padding: 0;
		background-image: url("http://114.116.112.52:8080/data/img/ct.jpg");
		background-repeat: no-repeat;
		background-size:100%;
		background-position: 0px -50px;
	}
	.box{
		width: 300px;
		padding: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #00000068;
		text-align: center;
	}
	h1{
		color: #FFFFFF;
		text-transform: uppercase;
		font-weight: 500;
	}
	.button{
		border: 0;
		font-size: 17px;
		background: none;
		display: block;
		margin: 20px auto;
		text-align: center;
		border: 2px solid #FFFFFF;
		padding: 14px 20px;
		outline: none;
		color: #ffffff;
		border-radius: 24px;
		transition: 0.25s;
		cursor: pointer;
	}
	.button:hover{
		background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
		font-size: x-large;

	}

	/* 实现跳转页面去掉下划线 */
	form button {
		outline: 0;
		background-color: white;
		border: 0;
		padding: 13px 15px;
		color: #ffffff;
		border-radius: 3px;
		width: 250px;
		cursor: pointer;
		font-size: 18px;
		position: relative;
	}

	form button:hover {
		background-color: rgba(255, 255, 255, 0.4);
	}

	a {
		text-decoration: none;
	}
</style>